<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .b1 {
        width: 100px;
        height: 100px;
        background-color: red;
      }
      .b2 {
        width: 200px;
        height: 200px;
        background-color: rgb(187, 255, 0);
      }
    </style>
    <script>
      window.onload = function () {
        var btn01 = document.getElementById("btn01");
        var box = document.getElementById("box");
        btn01.onclick = function () {
          // 通过style属性修改元素的样式，没修改一次，浏览器就得重新渲染一次页面
          // ？当修改多个样式时，不方便
          //   box.style.width = "200px";
          //   box.style.height = "200px";
          //   box.style.backgroundColor = "yellow";

          /**
           * 同时修改多个样式
           * 可以通过修改元素的class属性来间接修改样式
           */
          //   box.className += " b2";
          //   addClass(box, "b2");
          //   alert(hasClass(box, "h"));
          //   removeClass(box, "b2");
          toggleClass(box, "b2");
        };
      };
      //   定义一个函数，用来向一个元素中添加指定的class属性值
      /**
       * 参数：
       * obj 要添加class属性的元素
       * cn 要添加的class值
       *
       */
      function addClass(obj, cn) {
        //检查obj中是否含有cn
        if (hasClass(obj, cn)) {
          obj.className += " " + cn;
        }
        obj.className += " " + cn;
      }
      /**
       * 判断一个元素中是否含有指定的class属性值
       * 如果有则返回true
       */

      function hasClass(obj, cn) {
        // 创建正则表达式
        // var reg = /\bb2\b/;
        var reg = new RegExp("\\b" + cn + "\\b");

        return reg.test(obj.className);
      }
      /**
       * 删除一个元素的指定的class属性
       */
      function removeClass(obj, cn) {
        var reg = new RegExp("\\b" + cn + "\\b");

        // 删除class
        obj.className = obj.className.replace(reg, "");
      }
      /**
       *  toggkeClass可以用来切换一个类
       * 如果元素中具有该类，则删除
       * 如果元素中没有该类，则添加
       */
      function toggleClass(obj, cn) {
        if (hasClass(obj, cn)) {
          removeClass(obj, cn);
        } else {
          addClass(obj, cn);
        }
      }
    </script>
  </head>
  <body>
    <button id="btn01">点击修改box样式</button>
    <br /><br />
    <div id="box" class="b1 b2"></div>
  </body>
</html>
